/* pages/ensureCase/ensureCase.wxss */
.container {
  height: 100vh;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

scroll-view{
  flex: 1;
  overflow-y: auto;
}

.step{
  width: 660rpx;
  margin: 0 auto;
  display: none;

  &.show{
    display: block;
  }

  .topic{
    padding: 36rpx 0;
    background: #fff;
    border-radius: 16rpx;
    text-align: center;
    margin: 50rpx 0 38rpx;
    font-size: 30rpx;

    .content{
      color: #32A9F5;
    }
    .tip{
      font-size: 16rpx;
      color: #777676;

    }
  }

  .box{
    border-radius: 16rpx;
    overflow: hidden;
    background: #fff;
    margin-bottom: 20rpx;
    .case{
      .title{
        justify-content: space-between;
      }
    }
    .title{
      height: 94rpx;
      font-size: 32rpx;
      background: #32A9F5;
      padding: 0 40rpx 0 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #fff;

      label{
        font-size: 20rpx;
        margin: 10rpx 0 0 10rpx;
      }

      .detail-btn{
        font-size: 24rpx;
      }
    }
    .info{
      border: 1px #CDCDCD solid;
      border-radius: 0 0 16rpx 16rpx ;
      border-width: 0 1px 1px 1px;
      overflow:hidden;
      font-size: 24rpx;
      padding: 30rpx 40rpx 30rpx 30rpx;

      .label{
        font-size: 24rpx;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .edit{
          color: #aaa;
          font-weight: normal;
        }
      }

      .value{
        font-size: 24rpx;
        color: #777676;

        .input{
          width: 100%;
          border: 1px #aaa solid;
          border-radius: 8rpx;
          padding: 0 10rpx;
          box-sizing: border-box;
        }
      }

      .guide-box{
        .guide-title{
          color:#32A9F5;
          display: flex;
          align-items: center;
          .icon{
            width: 25.22rpx;
            margin-right: 12.5rpx;
            font-size: 28rpx;
          }
        }
        .guide-content{
          margin-top: 30rpx;
          padding: 0 0 24rpx;
          border-bottom: 1px #DBDBDB solid;
        }
        .guide-origin{
          margin-top: 30rpx;
          .tip{
            font-size: 24rpx;
            padding: 0 0 15rpx;
            display: flex;
            justify-content: space-between;
            .time{
              font-size: 20rpx;
              color: #858585;
            }
          }
          .join-doctor{
            .head{
              display: flex;
              align-items: center;
              .avatar{
                width: 52rpx;
                height: 52rpx;
              }
              .info{
                border: 0;
                padding: 20rpx 0;
                margin: 0 0 0 20rpx;
                .name{
                  font-size: 24rpx;
                }
                .hospital{
                  font-size: 20rpx;
                  color: #8A8A8A;
                }
              }
            }
          }
          .text{
            .li{
              font-size: 20rpx;
              color: #8A8A8A;
              display: flex;
              justify-content: space-between;
            }
          }
        }
      }

      .tags{
        margin-bottom: 20rpx;
        .label{
          display: flex;
        }
        .tag{
          height: 36rpx;
          line-height: 36rpx;
          padding: 0 15rpx;
          background:  rgba(50, 169, 245, 0.5);
          border-radius: 4rpx;
          margin-left: 12rpx;
          font-weight: normal;
          font-size: 20rpx;
          color: #fff;
        }
      }

      .status, .transfer{
        margin-bottom: 20rpx;
        padding: 0 0 20rpx;
        border-bottom: 1px #DBDBDB solid;
        .label{
          margin-bottom: 5rpx;
        }
      }

      .other{
        padding: 0 0 20rpx;
        display: flex;
        .value{
          font-size: 20rpx;
        }
        .time{
          min-width: 180rpx;
          max-width: 360rpx;
        }
        .hospital{
          margin-left: 60rpx;
          flex: 1;
        }
      }

      .comment{
        display: flex;
        align-items: center;
        .icon{
          width: 20rpx;
          height: 18rpx;
        }
        .num{
          font-size: 24rpx;
          margin-left: 10rpx;
        }
        .list{
          display: flex;
          margin-left: 10rpx;

          .avatar{
            width: 30rpx;
            height: 30rpx;
            border: 6rpx #fff solid;
            margin-left: -10rpx;

            &:nth-child(1){
              margin-left: -5rpx;
            }
          }
        }
      }
    }
  }
}
.select{
  width: 520rpx;
  height: 80rpx;
  display: flex;
  justify-content: space-between;
  border: 1px solid #CDCDCD;
  margin: 0 auto 20rpx;
  padding: 0 30rpx;
  align-items: center;
  border-radius: 16rpx;
  box-sizing: border-box;
  background: #fff;
  position: relative;
  z-index: 1;

  .span{
    font-size: 28rpx;

    &.placeholder{
      color: #C9C9C9;
    }
  }
  .icon{
    width: 20rpx;
    height: 20rpx;
  }
}
.search-modal{
  width: 520rpx;
  margin: 0 auto;
  padding: 10rpx;
  border: 1px solid #CDCDCD;
  border-radius: 16rpx;
  box-sizing: border-box;
  background: #fff;

  .search{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1px solid #C9C9C9;
    margin: 0 20rpx 27rpx;

    input{
      font-size: 24rpx;
      height: 30rpx;
      display: flex;
      padding: 0;
      border: none;
      outline: none;
      align-items: center;
    }

    .icon-search{
      width: 30rpx;
      height: 30rpx;
    }
  }

  .input-placeholder{
    height: 30rpx;
    color:#C9C9C9;
    font-size: 24rpx;
    display: flex;
    align-items: center;
  }

  .list{
    scroll-view{
      max-height: 260rpx;
      box-sizing: border-box;
    }
    .guide{
      display: flex;
      justify-content: space-between;
      padding: 10rpx 20rpx 20rpx;

      .g-info{
        display: flex;
        align-items: center;
        .i-icon{
          width: 25.22rpx;
          height: 30rpx;
        }
        .i-title{
          font-size: 24rpx;
          padding: 0 0 0 12rpx;
        }
      }

      .g-select{
        font-size: 24rpx;
        color: #C9C9C9;
      }
    }
  }
}

.make, .make-disable{
  width: 60%;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 151rpx;
  font-size: 26rpx;
  flex: 1;
  color: #fff;
  background: #32A9F5;
  margin: 20rpx auto 0;
}

.make-disable{
  background: #fff;
  border: 1px solid #CDCDCD;
  color: #000;
}

.buttons{
  display: flex;
  justify-content: space-between;
  padding: 0 0 50rpx;
  .back, .sure{
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border-radius: 151rpx;
    font-size: 32rpx;
    flex: 1;
  }
  .back{
    color: #858585;
    border: 1px #777676 solid;
    margin-right: 28rpx;
  }
  .sure{
    color: #fff;
    background: #32A9F5;
  }
}